<!-- image预览弹窗 -->
<template>
  <div v-if="visible">
    <el-image-viewer :on-close="close" :url-list="urlLists" />
    <div class="imgWatermark">
      <div
        class="mark"
        v-for="(item, index) in 100"
        :key="index"
        :style="watermark.styles"
      >
        {{ watermark.text }}
      </div>
    </div>
  </div>
</template>
<script>
// 导入组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  name: "preview-image",
  components: { ElImageViewer },
  props: {
    url: {
      type: String,
      default: ""
    },
    urlList: {
      type: Array,
      default: () => []
    },
    watermark: {
      type: [Object, undefined],
      default: () => ({ text: "", styles: {} })
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    url: {
      handler(value) {
        this.urlLists = this.urlList.length ? this.urlList : [this.url];
      },
      immediate: true,
      deep: true
    },
    urlList: {
      handler(value) {
        this.urlLists = value.length ? value : [this.url];
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      urlLists: []
    };
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.imgWatermark {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10000;
}
.imgWatermark .mark {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  transform: rotate(-30deg);
  color: rgba(180, 180, 180, 0.3);
  font-size: 16px;
}
</style>
